<template>
<div>
  <div
    class="navigation"
    :class="{ active: isActive }"
    ref="navigation"
  >
    <div class="profile">
      <div class="imgBx" @click.stop="toggleNav">
        <img :src="avatar" alt="avatar"/>
      </div>
    </div>
    <div class="menu" v-if="isActive">
      <li v-for="(item, index) in menuItems" :key="index" @click="item.clickMethod">
        <a>
          <span class="icon">
            <i :class="item.iconClass"></i>
          </span>
          <span class="text">{{ item.label }}</span>
        </a>
      </li>
    </div>
  </div>
  <!-- 客服对话框组件 -->
  <CustomerServiceDialog
    class="customer"
    :visible.sync="showCustomerService"
  />
</div>
</template>

<script>
import store from '@/store'
import CustomerServiceDialog from '@/views/component/CustomerServiceDialog.vue'

export default {
  name: 'MySelf',
  components: { CustomerServiceDialog },
  data() {
    return {
      isActive: false,
      // 控制客服对话框显示/隐藏
      showCustomerService: false,
      menuItems: [
        { label: '个 人 中 心', iconClass: 'fa-solid fa-user-gear', clickMethod: () => this.pathGoTo('/personal') },
        { label: '安 全 中 心', iconClass: 'fa-solid fa-key', clickMethod: () => this.pathGoTo('/safety') },
        { label: '联 系 客 服', iconClass: 'fa-regular fa-headphones', clickMethod: this.openHelp },
        { label: '登 出 系 统', iconClass: 'fa-solid fa-right-from-bracket', clickMethod: this.logout }
      ]
    }
  },
  computed: {
    avatar() {
      return store.getters.userInfo.avatar
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  },
  methods: {
    toggleNav() {
      this.isActive = !this.isActive
    },
    handleClickOutside(event) {
      if (
        this.isActive &&
        this.$refs.navigation &&
        !this.$refs.navigation.contains(event.target)
      ) {
        this.isActive = false
      }
    },
    async logout() {
      try {
        await this.$confirm('确定要退出系统吗？', '提示', {
          confirmButtonText: '退出',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      } catch (e) {
        // 用户点了取消，不处理
      }
    },
    openHelp() {
      this.showCustomerService = true
    },
    pathGoTo(path) {
      this.$router.push(`${path}`)
      this.isActive = false
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navigation {
  width: 80px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  transition: 0.5s;
  overflow: hidden;
  margin-right: 10px;
  position: absolute; /* 相对于父组件定位 */
  top: 0; /* 距离父组件顶部 */
  right: 0; /* 距离父组件左边 */
  z-index: 1000; /* 保证浮在上层 */
}

.navigation.active {
  width: 350px;
  background: #fff;
}

.navigation .profile {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  width: 100%;
}

/* 以下保持原样 */
.navigation .profile .imgBx {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden;
  transition: 0.5s;
  border-radius: 50%;
  cursor: pointer;
}

.navigation.active .profile .imgBx {
  width: 150px;
  height: 150px;
}

.navigation .profile .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navigation .menu {
  position: relative;
  width: 100%;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  transition: 0.5s;
}

.navigation.active .menu {
  padding: 10px 20px;
}

.navigation .menu li {
  list-style: none;
}

.navigation .menu li a {
  position: relative;
  display: flex;
  text-decoration: none;
  color: #111;
  border-radius: 10px;
}

.navigation .menu li a:hover {
  background: #0084ff;
  color: #fff;
}

.navigation .menu li a .icon {
  position: relative;
  min-width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

.navigation .menu li a .text {
  position: relative;
  height: 60px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25em;
}
</style>
